// 自已封装的一些样式类
.tl-color-red {
    color: var(--tl-red) !important;
}

.tl-color-ff0000 {
    color: #ff0000 !important;
}

.tl-color-white {
    color: #fff !important;
}

.tl-color-white-8 {
    color: rgba(255, 255, 255, .8) !important;
}

.tl-color-block-6 {
    color: rgba(0, 0, 0, 0.6) !important;
}

.tl-color-block-8 {
    color: rgba(0, 0, 0, 0.8) !important;
}

.tl-color-block {
    color: #000 !important;
}

.tl-color-primary {
    color: var(--tl-primary);
}

.tl-color-success {
    color: var(--tl-success);
}

//.tl-background-color {
//    background-color: rgba(234, 234, 234, .9);
//}
.tl-background-info {
    background: var(--tl-gray);
}

.tl-text-no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tl-font-weight-700 {
    font-weight: 700;
}

.tl-font-10-px {
    font-size: 10px !important;
}

.tl-font-12-px {
    font-size: 12px !important;
}

.tl-font-14-px {
    font-size: 14px !important;
}

.tl-font-16-px {
    font-size: 16px !important;
}

.tl-font-18-px {
    font-size: 18px !important;
}

.tl-font-20-px {
    font-size: 20px !important;
}

.tl-font-24-px {
    font-size: 24px !important;
}

.tl-font-30-px {
    font-size: 30px !important;
}

.tl-font-60-px {
    font-size: 60px !important;
}

.tl-text-center {
    text-align: center !important;
}

.tl-text-right {
    text-align: right !important;
}


.tl-border-none {
    border: none !important;
}

.tl-border-radius-8 {
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border-radius: 8px !important;
}

.tl-border-radius-0 {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.tl-min-width-1366 {
    min-width: 1366px !important;
}

.tl-width-10-percent {
    width: 10% !important;
}

.tl-width-15-percent {
    width: 15% !important;
}

.tl-width-20-percent {
    width: 20% !important;
}

.tl-width-25-percent {
    width: 25% !important;
}

.tl-width-30-percent {
    width: 30% !important;
}

.tl-width-35-percent {
    width: 35% !important;
}

.tl-width-40-percent {
    width: 40% !important;
}

.tl-width-60-percent {
    width: 60% !important;
}

.tl-width-70-percent {
    width: 70% !important;
}

.tl-width-75-percent {
    width: 75% !important;
}

.tl-width-80-percent {
    width: 80% !important;
}

.tl-width-85-percent {
    width: 85% !important;
}

.tl-width-90-percent {
    width: 90% !important;
}

.tl-width-95-percent {
    width: 95% !important;
}

.tl-width-100-percent {
    width: 100% !important;
}

.tl-width-100 {
    width: 100px !important;
}

.tl-width-200 {
    width: 200px !important;
}

.tl-width-300 {
    width: 300px !important;
}

.tl-height-1-pt {
    height: 1pt !important;
}

.tl-height-20-vh {
    height: 20vh !important;
}

.tl-height-40-vh {
    height: 40vh !important;
}

.tl-height-72 {
    height: 72px !important;
}

.tl-height-70-percent {
    height: 70% !important;
}

.tl-height-80-percent {
    height: 80% !important;
}

.tl-height-90-percent {
    height: 90% !important;
}

.tl-height-100-percent {
    height: 100% !important;
}

.tl-height-50 {
    height: 50px !important;
}

.tl-height-100 {
    height: 100px !important;
}

.tl-height-150 {
    height: 150px !important;
}

.tl-height-400 {
    height: 400px !important;
}

.tl-height-544 {
    height: 544px !important;
}

.tl-height-570 {
    height: 570px !important;
}

.tl-height-600 {
    height: 600px !important;
}

.tl-min-height-100-vh {
    min-height: 100vh !important;
}

.tl-min-height-100 {
    min-height: 100px !important;
}

.tl-min-height-120 {
    min-height: 120px !important;
}

.tl-min-height-150 {
    min-height: 150px !important;
}

.tl-min-height-200 {
    min-height: 200px !important;
}

.tl-min-height-300 {
    min-height: 300px !important;
}

.tl-min-height-400 {
    min-height: 400px !important;
}

.tl-inset-0 {
    inset: 0 !important;
}

.tl-padding-0 {
    padding: 0 !important;
}

.tl-padding-5 {
    padding: 5px !important;
}

.tl-padding-15 {
    padding: 15px !important;
}

.tl-padding-20 {
    padding: 20px !important;
}

.tl-padding-10-0 {
    padding: 10px 0 !important;
}

.tl-padding-20-0 {
    padding: 20px 0 !important;
}

.tl-padding-0-5 {
    padding: 0 5px !important;
}

.tl-padding-0-10 {
    padding: 0 10px !important;
}

.tl-padding-0-15 {
    padding: 0 15px !important;
}

.tl-padding-0-20 {
    padding: 0 20px !important;
}

.tl-padding-0-30 {
    padding: 0 30px !important;
}

.tl-padding-0-40 {
    padding: 0 40px !important;
}

.tl-padding-0-100 {
    padding: 0 100px !important;
}

.tl-margin-0 {
    margin: 0 !important;
}

.tl-margin-0-auto {
    margin: 0 auto !important;
}

.tl-margin-auto {
    margin: auto !important;
}

.tl-margin-5 {
    margin: 5px !important;
}

.tl-margin-10 {
    margin: 10px !important;
}

.tl-margin-0-5 {
    margin: 0 5px !important;
}

.tl-margin-0-10 {
    margin: 0 10px !important;
}

.tl-margin-0-15 {
    margin: 0 15px !important;
}

.tl-margin-0-20 {
    margin: 0 20px !important;
}

.tl-margin-0-50 {
    margin: 0 50px !important;
}

.tl-margin-5-0 {
    margin: 5px 0 !important;
}

.tl-margin-10-0 {
    margin: 10px 0 !important;
}

.tl-margin-15-0 {
    margin: 15px 0 !important;
}

.tl-margin-20-0 {
    margin: 20px 0 !important;
}

.tl-margin-30-0 {
    margin: 30px 0 !important;
}

.tl-margin-24-auto {
    margin: 24px auto !important;
}

.tl-margin-left-0 {
    margin-left: 0 !important;
}

.tl-margin-left-5 {
    margin-left: 5px !important;
}

.tl-margin-left-10 {
    margin-left: 10px !important;
}

.tl-margin-left-20 {
    margin-left: 20px !important;
}

.tl-margin-left-30 {
    margin-left: 30px !important;
}

.tl-margin-left-40 {
    margin-left: 40px !important;
}

.tl-margin-left-60 {
    margin-left: 60px !important;
}

.tl-margin-right-0 {
    margin-right: 0 !important;
}

.tl-margin-right-5 {
    margin-right: 5px !important;
}
.tl-margin-right-10 {
    margin-right: 10px !important;
}

.tl-margin-right-20 {
    margin-right: 20px !important;
}

.tl-margin-right-30 {
    margin-right: 30px !important;
}

.tl-margin-top--75 {
    margin-top: -75px !important;
}

.tl-margin-top-0 {
    margin-top: 0 !important;
}

.tl-margin-top-5 {
    margin-top: 5px !important;
}

.tl-margin-top-10 {
    margin-top: 10px !important;
}

.tl-margin-top-15 {
    margin-top: 15px !important;
}

.tl-margin-top-20 {
    margin-top: 20px !important;
}

.tl-margin-top-30 {
    margin-top: 30px !important;
}

.tl-margin-top-40 {
    margin-top: 40px !important;
}

.tl-margin-top-60 {
    margin-top: 60px !important;
}

.tl-margin-top-80 {
    margin-top: 80px !important;
}

.tl-margin-top-100 {
    margin-top: 100px !important;
}

.tl-margin-top-120 {
    margin-top: 120px !important;
}

.tl-margin-bottom-0 {
    margin-bottom: 0 !important;
}

.tl-margin-bottom-10 {
    margin-bottom: 10px !important;
}

.tl-margin-bottom-15 {
    margin-bottom: 15px !important;
}

.tl-margin-bottom-20 {
    margin-bottom: 20px !important;
}

.tl-overflow-hidden {
    overflow: hidden !important;
}

.tl-float-left {
    float: left;
}

.tl-float-right {
    float: right;
}

.tl-position-absolute {
    position: absolute !important;
}

.tl-position-relative {
    position: relative !important;
}

.tl-display-flex {
    display: flex !important;
}

.tl-display-inline-flex {
    display: inline-flex !important;
}

.tl-display-inline-grid {
    display: inline-grid !important;
}

.tl-display-block {
    display: block !important;
}

.tl-display-inline-block {
    display: inline-block !important;
}

.tl-justify-space-around {
    justify-content: space-around !important;
}

.tl-background-black {
    background: black;
}

.tl-background-color-transparent {
    background-color: transparent !important; /* 设置背景透明 */
}

.tl-background-color-white {
    background-color: #FFFFFF !important;
    z-index: -100;
}

.tl-background-color-white-7 {
    background-color: rgba(255, 255, 255, .7) !important;
    z-index: -100;
}

.tl-v-center { // 垂直对齐
    display: flex;
    align-items: center;
}

.tl-h-center { // 水平对齐
    display: flex;
    justify-content: center;
}

.tl-left-center {
    display: flex !important;
    align-items: center !important;
    justify-content: left !important;
}

.tl-vh-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tl-pointer-events-none {
    pointer-events: none;
}

.tl-pointer-events-auto {
    pointer-events: auto;
}

.tl-outline-none {
    outline: none;

    &:focus {
        outline: none;
    }

    &:hover {
        outline: none;
    }
}

.tl-disable {
    opacity: .4 !important;
    filter: alpha(opacity=50) !important;
    pointer-events: none !important;
}

.tl-clearfix {
    zoom: 1;

    &:before, &:after {
        clear: both;
        content: '.';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
    }
}
